.grid-sidebar,
.grid-sidebar:before {
    transition: margin-left .1s ease-in-out, width .1s ease-in-out;
}

.grid-sidebar {
    border-right: 1px solid #eff1f7;
    background-color: white;
    height: 100vh;
    overflow-y: hidden;
    z-index: 1038;
    bottom: 0;
    float: none;
    left: 0;
    position: fixed;
    top: 0;
}
.grid-sidebar div {
    float: left;
}

.grid-sidebar .da-tree,
.grid-sidebar .da-button,
.treeDemo {
    width: 160px;

}

#openClose {
    height: 100vh;
    width: 7px;
    display: block;
    float: left;
    top: 0;
    border-left: 1px solid #eff1f7;
    border-right: 1px solid #eff1f7;
    background-color: #eff1f7;
}

#openClose:hover {
   
    background-color:beige;
}

#openClose span {
    margin-top: 50vh;

}

.widthhidden {
    margin-left: -161px;
}

.card-body{
    margin-left: 168px;
}
.categoryleft{
    margin-left: 7px;
}

@media (max-width: 768px) {

.grid-sidebar:not(.widthhidden),
.grid-sidebar:not(.widthhidden):before {

margin-left: -161px;
}
.widthhidden {
    margin-left: 7px;
}
.card-body,.card-body:before {
box-shadow: none !important;
margin-left: 7px;
}
}